<template>
  <div style="padding-top:40px;">
    <div>
      <div style="padding:10px;">抢购中 先下单先得哦</div>
      <div>
        <div class='content-list' v-for="(item,index) in miaoShas" :key="index">
          <div class='list-image-box'>
            <image class="list-image" :src="item.picture_url"></image>
          </div>
          <div class='issue-name'>
            <div>
              {{item.product_name}}
              <span style="float:right;color:red;font-size:14px;padding-right:10px;">{{item.djs}}</span>
            </div>
            <div style='margin-top:2px;'>
              <span style="color:red;font-size:18px;">¥ {{item.price}}</span>
              <span :class="item.djs=='抢购中'?'select-qianggou':'qianggou'" @click="goBuy(item,index)">立即抢购</span>
            </div>
            <div class="step-con">
              <span class="zan-text-deleted zan-c-gray-dark">¥ {{item.origin_price}}</span>
              <span class="progress-text">已售{{item.jdt}}%</span>
              <progress class="progress" :percent="item.jdt" activeColor="red" backgroundColor="#EAEAEA" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import moment from 'moment'
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
  export default {
    data () {
      return {
        miaoShas:[],
      }
    },
    computed: {
      ...mapGetters([
        'login_info'
      ])
    },
    async mounted () {
      let result = await api.findMiaoShas({brand_id:this.login_info.brand_id})
      if (result.code == 0) {
        console.log('result=>',result)
        //处理价格
        result.data.forEach(item=>{
          item.origin_price = item.origin_price/100
          item.price = item.price/100
        })
        result.data.map((obj,index)=>{
          this.$set(
            obj,"djs",this.InitTime(obj.open_date,obj.start_hour,obj.end_time)
          )
          this.$set(
            obj,"jdt",this.handleProgress(obj.ms_num,obj.sale_num)
          )
        })
        this.miaoShas = result.data
      }
      setInterval(()=> {
        this.miaoShas.map((obj,index)=>{
          this.$set(
            obj,"djs",this.InitTime(obj.open_date,obj.start_hour,obj.end_time)
          )
        })
      },1000)
    },
    methods: {
      ...mapActions([
        'setMiaoShaGoods'
      ]),
      InitTime(start_date,start_time,end_time){
        var hh,mm,ss = null;
        let startTime
        if (Number(start_time) < 10) {
          startTime = (new Date(start_date + ' ' + '0'+ start_time + ':00:00')).valueOf()
        }else {
          startTime = (new Date(start_date + ' ' + start_time + ':00:00')).valueOf() 
        }
        let endTime = (new Date(end_time)).valueOf() 
        let nowTime = (new Date()).valueOf() 

        if(startTime <= nowTime && nowTime <= endTime){
          return '抢购中'
        }else if(endTime < nowTime){
          return '已结束'
        }else{
          let diftime = (startTime - nowTime)/1000
          hh = Math.floor((diftime / 60 / 60) % 24);
          mm = Math.floor((diftime / 60) % 60);
          ss = Math.floor(diftime % 60);
          if (hh<10) {
            hh = '0' + hh
          }
          if (mm<10) {
            mm = '0' + mm
          }
          if (ss<10) {
            ss = '0' + ss
          }
          var str = hh+":"+mm+":"+ss
          return str
        }
      },
      handleProgress(ms_num,sale_num){
        return parseInt(sale_num/ms_num*100)
      },
      goBuy(item,index){
        if (item.djs == '抢购中') {
          this.setMiaoShaGoods(item)
          wx.navigateTo({
            url: 'miaosha_balance'
          })
        }
      }
    }
  }
</script>
<style>
page{
  background: #F2F2F2;
}
.content-list{
  margin:0 10px 15px 10px;
  height: 100px;
  display:flex;
  background: white;
  border-radius: 5px;
}
.list-image-box{
  width:20%;
  height:100px;
  padding-left: 15px;
}
.list-image{
  width:80px;
  height: 80px;
  vertical-align: middle;
  margin-top: 10px;
}
.issue-name{
  width:80%;
  font-size:17px;
  margin-top:10px;
  margin-left: 20px;
}
.step-con{
  position: relative;
  padding-top: 2px;
}
.progress{
  width:45px;
  position: absolute;
  right:8px;
  bottom:9px;
}
.progress-text{
  color:#AAAAAA;
  font-size:12px;
  float:right;
  position: absolute;
  right:60px;
  bottom:2px;
}
.select-qianggou{
  font-size: 15px;
  float: right;
  margin-right: 10px;
  padding: 8px 13px;
  background: red;
  color: white;
}
.qianggou{
  font-size: 15px;
  float: right;
  margin-right: 10px;
  padding: 8px 13px;
  background: #EAEAEA;
  color: white;
}
</style>